<template>
  <view class="mscroll">
    <!-- 下拉刷新 -->
    <!-- <view class="loading pullLoading">
      <i class="dot"></i>
    </view> -->
    <!-- 内容插槽 -->
    <slot/>
    <!-- 上拉加载 -->
    <view v-if="hasNextPage" class="loading">
      <i class="dot"></i>
    </view>
    <div class="noMore" v-if="!hasNextPage && numTotal > 0">
        没有更多数据了
    </div>
    <!-- 空布局 -->
    <!-- <view class="empty" v-if='isEmpty'>
      <img mode='widthFix' src="/static/null_img.png" alt="">
      <p>这里什么都没有呀~</p>
    </view> -->
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      required: true,
      
      default () {
        return {
          // 当前页码
          page: 1,
          // 每页条数
          pageSize: 10,
          // 是否有下一页
          hasNextPage: false,
          // 数据总数
          total: 0
        }
      }
    }
  },
  data () {
    return {
      // 下一页
      hasNextPage: false,
      // 无数据
      isEmpty: false,
      // 加载中
      isLoading: false,
      numTotal: 0,
    }
  },
  computed: {
    // 转换一下pages
    pages () {
        
      return this.value
    }
  },
  created(){
      console.log('this.pages',this.pages)
  },
  methods: {
    // 下拉刷新
    pullRefresh () {
      // 加载中
      this.isLoading = true
      this.$emit('input', {...this.pages, page: 1})
      this.$emit('getData')
    },
    // 上拉加载
    loadMore () {
      // 无下一页或加载中不加载
      if (!this.hasNextPage || this.isLoading) return
      // 加载中
      this.isLoading = true
      this.$emit('input', {...this.pages, page: this.pages.page + 1})
      this.$emit('getData')
    },
    // 加载成功方法
    loadSuccess (data) {
        console.log('data',data)
        this.numTotal = data.total
      // 第一页要回到顶部
      if (data.page == 1) {
        uni.pageScrollTo({
          scrollTop: 0
        })
      }
      // 结束下拉刷新
      uni.stopPullDownRefresh()
      // 关闭加载中
      this.isLoading = false
      // 是否有下一页（可根据总页数和当前页数判断）
      this.hasNextPage = data.hasNextPage
      // 是否有数据
      this.isEmpty = !data.total
    }
  }
}
</script>

<style lang='scss' scoped>
  // 加载中动画
  @keyframes dotFlashing {
    0% {
      background-color: #ccc;
    }
    100% {
      background-color: #999;
    }
  }
  .mscroll{
    // loading
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100upx;
      overflow: hidden;
      &.pullLoading{
        // 这里是关键
        margin-top: -100upx;
      }
      // 模拟微信小圆点
      .dot {
        display: inline-block;
        position: relative;
        width: 14upx;
        height: 14upx;
        border-radius: 50%;
        background: #999;
        animation: dotFlashing 1s infinite linear alternate;
        animation-delay: .5s;
        &::before {
          left: -28upx;
          animation: dotFlashing 1s infinite alternate;
          animation-delay: 0s;
        }
        &::after {
          left: 28upx;
          animation: dotFlashing 1s infinite alternate;
          animation-delay: 1s;
        }
        &::before,
        &::after {
          content: '';
          display: inline-block;
          position: absolute;
          top: 0;
          width: 14upx;
          height: 14upx;
          border-radius: 50%;
          background: #999;
        }
      }
    }
    // 空布局
    .empty{
      margin-top: 280upx;
      text-align: center;
      img{
        width: 180upx;
      }
      p{
        margin-top: 20upx;
        color: #999;
        font-size: 26upx
      }
    }
    .noMore{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #777;
    }
  }
</style>
